
import './ThemeA01.scss'
import { useMount } from 'ahooks'

import { ConfigProvider } from 'antd'
import { lazy, Suspense, useState } from 'react'

import { themeStore } from '../../Config/zustand'

import { ThemeBackImageList } from '../../Config/theme'
import { BackGrundType } from '../../Config/BackGrundType'
import { ModelBox, DrawerBox } from '../../Model'



const Logo = lazy(() => import(`./LogoA01`))
const Menu = lazy(() => import(`./MenuA01`))
const Head = lazy(() => import(`./HeadA01`))
const Body = lazy(() => import(`./BodyA01`))

const ThemeA01 = () => {
    const { theme } = themeStore()
    const { color, maskColor, maskPx, backType, backColor, backImage, backGrundType, grundStyle } = theme

    return (
        <ConfigProvider theme={{ token: { colorPrimary: `rgba(${color},1)` } }}>
            <Suspense>
                <div
                    className='ThemeA01'
                    style={backType === 'Color' ? { background: backColor } :
                        backType === 'Ground' ? BackGrundType[backGrundType](grundStyle) : {}
                    }
                >
                    <div className='Mask' style={{ background: maskColor, backdropFilter: `blur(${maskPx}px)` }} />
                    {backType === 'Image' && <img className='Image' src={ThemeBackImageList[backImage]} alt="" />}
                    <div className='Left'>
                        <Logo />
                        <Menu />
                    </div>
                    <div className='Right'>
                        <Head />
                        <Body />
                    </div>
                </div>
            </Suspense>
            <ModelBox />
            <DrawerBox />
        </ConfigProvider>
    );
};

export default ThemeA01;